<template>
    <div class="VonInputBottom">
        <div class="label" v-if="label">{{label}}</div>
        <div class="value" :style="customStyle">
            <div class="showValue">{{value}}</div>
        </div>
    </div>
</template>

<script>
  export default {
    name: "VonInputBottom",
    data(){
      return{

      }
    },
    props:{
      suffix:{
        type:Boolean,
        default:true
      },
      placeholder:{
        type:String,
        default:''
      },
      width:{
        type:String,
        default:'300px'
      },
      height:{
        type:String,
        default:'44px'
      },
      label:{
        type:String,
        default:''
      },
      value:{
        type:[String,Number],
        default:''
      },
    },
    methods:{
      toParentValue(){
        this.$emit('getBoxCode',this.value);//将this.value传出去
         this.$emit('getProductBarCode',this.value);//将this.value传出去
      }
    },
    mounted(){
      this.toParentValue();
    },
    computed:{
      customStyle(){
        let styleObj = {};
        styleObj.width = this.width;
        styleObj.height = this.height;
        styleObj.lineHeight = this.height;
        return styleObj;
      }
    }
  }
</script>

<style  lang="scss">
    .VonInputBottom{
        display: flex;
        margin: 10px;
        .label{
            height: 40px;
            line-height: 60px;
            color: white;
            font-size: 16px;
            margin:0 16px;
        }
        .value{
            height: 40px;
            line-height: 40px;
            width: 200px;
            color: white;
            border-bottom: 1px solid white;
            .showValue{
                transform: translate(2px, 6px);
            }
        }
    }
</style>
